<template>
	<view>
		<view class="page-bgf" v-show="!loadingone" style="overflow-x: hidden;">
			<navbar name="食材详情"></navbar>
			<view class="wheat" :style="'background: url('+result.foodImageUrl+')no-repeat;background-size: 100% 100%;'">
				<image class="wheatImage image-blur" :src="result.foodImageUrl" mode="scaleToFill"></image>
				<view class="wheat-view">
					<view class="weui-flex">
						<view class="load-image">
							<u-lazy-load border-radius="16" height="136" img-mode="aspectFill"
								:image="result.foodImageUrl">
							</u-lazy-load>
						</view>
						<view class="food-name">
							<view class="food-title">
								{{result.food}}（100g）
							</view>
							<view class="ellipsis" style="width: 400upx;">
								别名：{{result.alias}}
							</view>
						</view>
					</view>
					<view class="weui-flex son-text">
						<view class="quantityofheat">
							<view class="title">
								{{result.foodHeat}}千卡
							</view>
							热量
						</view>
						<view class="else-view">
							<view class="title">
								{{result.foodCarbohydrate}}g
							</view>
							碳水化合物
						</view>
						<view class="else-view">
							<view class="title">
								{{result.foodFat}}g
							</view>
							脂肪
						</view>
						<view class="else-view">
							<view class="title">
								{{result.foodProtein}}g
							</view>
							蛋白质
						</view>
						<view class="else-view" v-if="result.foodCellulose||result.foodCellulose==0">
							<view class="title">
								{{result.foodCellulose}}g
							</view>
							纤维素
						</view>
					</view>
				</view>
			</view>
			<view class="particulars" v-if="result.adaptPeople">
				<view class="title-view">
					<view class="viewnoActave" :class="isclickyj == 1?'isclick':''" @tap.stop="clickyj(1)">适宜人群</view>
					<view class="viewnoActave" :class="isclickyj == 2?'isclick':''" @tap.stop="clickyj(2)">禁忌人群</view>
				</view>
				<view class="content2 ">
					<text>
						{{isclickyj == 1?result.adaptPeople:result.avoidPeople}}
					</text>
				</view>
				<view class="title titleClass" style="font-weight: bold;" v-if="result.introduce">
					<text style="padding-right: 30upx;">食材介绍</text>
				</view>
				<view class="content2" v-show="result.introduce">
					<text>
						{{result.introduce}}
					</text>
				</view>
				<view class="title titleClass" style="font-weight: bold;" v-if="result.nutritionAnalysis">
					<text style="padding-right: 30upx;">营养价值</text>
				</view>
				<view class="content2" v-show="result.nutritionAnalysis">
					<!-- <text> -->
						<!-- {{result.nutritionAnalysis}} -->
					<!-- </text> -->
					<u-parse :html="result.nutritionAnalysis"></u-parse>
				</view>
				<view class="bottom-line">
				</view>
			</view>
			<view class="suggest" v-show="result.goodArticles.length>0">
				<view class="causeTitle">
					健康百科
					<view class="moreTitle">
						更多
					</view>
				</view>
				<view class="wieww670">
					<block v-for="(item,idx) in result.goodArticles" :key="idx">
						<view class="weui-flex articleBody" @tap="encyclopedia(item,idx)">
							<view class="articleView">
								<view class="articleContent text-line">
									{{item.articleTitle}}
								</view>
								<view class="lockbody">
									<view class="lockView"></view>{{item.readNum}}
								</view>
							</view>
							<view class="articleImage">
								<u-lazy-load border-radius="10" height="160" img-mode="aspectFill"
									:image="item.coverUrl"></u-lazy-load>
							</view>
						</view>
						<u-line class="u-line" v-show="result.goodArticles.length -1!=idx"></u-line>
					</block>
				</view>
				<view class="bottom-line">
				</view>
			</view>
			<view class="suggest" style="margin-top:30upx;" v-if="result.foodMenus.length>0">
				<view class="causeTitle">
					相关做法
					<view class="moreTitle" @tap="navurl('/pages/subpackage/find/moreRecipes/moreRecipes')">
						更多
					</view>
				</view>
			</view>
			<view v-if="result.foodMenus">
				<scroll-view scroll-x="true" style="white-space: nowrap;display: flex;">
					<view style="padding: 30upx 0 30upx 30upx;">
						<block v-for="(item,idx) in result.foodMenus" :key="idx">
							<view class="every-box" @tap="navurl('/pages/subpackage/find/menu/menu?id='+item.id)">
								<u-lazy-load height="170" border-radius="10" img-mode="aspectFill" :image="item.pic">
								</u-lazy-load>
								<view class="text-opop">
									{{item.name}}
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
	</view>
</template>

<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"

	export default {
		components: {
			uLazyLoad,
			uParse,
			uLine,
			uLoading,
		},
		data() {
			return {
				loadingone: false,
				isclickyj: 1, //宜忌
				result: '',
				exerciseList: [
				],
				articleList: [
				],
				image: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
			}
		},
		onLoad(e) {
			this.getFoodDetailById(e.id, e.count)
		},
		methods: {
			//跳转地址
			navurl(url) {
				uni.navigateTo({
					url: url
				})
			},
			clickyj(num) {
				this.isclickyj = num
			},
			getFoodDetailById(id, count) {
				let _this = this;
				_this.loadingone = true;
				this.$api.get(global.apiUrls.getFoodDetailById + '?id=' + id + '&count=' + count, {}).then(res => {
					if (res.data.code == 1000) {
						let result = res.data.result;
						result.goodArticles = JSON.parse(result.goodArticles)
						_this.result = result;
						_this.loadingone = false;
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	@import url("../basescss/basescss.scss");

	.wheat {
		width: 750upx;
		height: 551upx;
		position: relative;

		.wheatImage {
			width: 702upx;
			height: 336upx;
			position: absolute;
			top: 249upx;
			left: 50%;
			border-radius: 50upx;
			transform: translateX(-50%);
		}

		.wheat-view {
			width: 702upx;
			height: 376upx;
			position: absolute;
			top: 249upx;
			left: 50%;
			transform: translateX(-50%);

			.load-image {
				width: 136upx;
				height: 136upx;
				margin: 30upx;
			}

			.food-name {
				font-size: 28upx;
				font-weight: 400;
				color: #FFFFFF;

				.food-title {
					font-size: 38upx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					padding: 40upx 0 10upx;
				}
			}

			.son-text {
				padding-top:10upx;
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40upx;
				text-align: center;

				.quantityofheat {
					min-width: 190upx;

					.title {
						font-size: 30upx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 42upx;
					}
				}

				.else-view {
					min-width: 120upx;

					.title {
						font-size: 30upx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 42upx;
					}
				}
			}
		}
	}

	.image-blur {
		position: relative;
		filter: blur(2px);
		-webkit-filter: blur(2px);
	}

	.image-blur::before {
		content: '';
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50rpx;
		background: url(http://static.bsyjk.cn/bgh0/01F05884AF344CB4BE9F12264E6FB92C.png)no-repeat;
		background-size: 100% 100%;
	}

	.suggest {
		width: 700upx;
		margin: 0 auto;
	}

	.particulars {
		width: 654upx;
		margin: 90upx auto 40upx;

		.title-view {
			display: flex;
			height: 100upx;
			font-size: 34upx;
			color: #333333;
			text-align: center;

			.viewnoActave {
				width: 190upx;
				height: 61upx;
				line-height: 61upx;
				background: #F5F5F5;
				border-radius: 20upx;
				margin-right: 20upx;
			}

			.isclick {
				background: rgba(46, 167, 224, 1);
				color: #fff;
			}
		}

		.content2 {
			font-size: 36upx;
			font-weight: 400;
			color: #333333;
			line-height: 64upx;
		}

		.isclick {}
	}

	.bottom-line {
		margin-top: 20upx;
		width: 654upx;
		height: 6upx;
		background: #F5F5F5;
	}

	.causeTitle {
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		line-height: 50upx;
		position: relative;
		left: 50upx;
	}

	.causeTitle::before {
		content: '';
		width: 9upx;
		height: 25upx;
		position: absolute;
		top: 14upx;
		left: -30upx;
		background: #2EA7E0;
		border-radius: 5upx;
	}

	.moreTitle {
		float: right;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		position: relative;
		right: 110upx;
	}

	.moreTitle:before {
		content: '';
		position: absolute;
		top: 4upx;
		right: -40upx;
		width: 36upx;
		height: 36upx;
		background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 36upx 36upx;
	}

	.every-box {
		display: inline-block;
		width: 170upx;
		height: 170upx;
		position: relative;
		margin-left: 15upx;

		.text-opop {
			width: 170upx;
			height: 44upx;
			color: #fff;
			text-align: center;
			line-height: 44upx;
			position: absolute;
			bottom: 0;
			background: #000;
			opacity: 0.5;

		}
	}
	.titleClass{
		color: rgba(51, 51, 51, 1);
		padding: 30upx 0 10upx;
	}
	.textalileft{
		align-items: left!important;
	}
</style>
